<template>
  <div v-loading="loading">
    <!-- 头部 -->
    <div class="header_box">
      <span @click="goHome()">
        <img
          class="imgOne"
          src="~@/assets/duZhongTai/goHomeOne.png"
          alt=""
          srcset=""
        />
      </span>
      <span class="title">嘟中台</span>
      <span>
        <!-- <img class="imgTwo" src="~@/assets/duZhongTai/more.png" alt="" srcset="" /> -->
        <van-popover
          v-model="showPopover"
          trigger="click"
          @select="onSelect"
          placement="bottom-end"
        >
          <!--  :actions="actions" -->
          <template slot="reference">
            <img
              class="imgTwo"
              src="~@/assets/duZhongTai/more.png"
              alt=""
              srcset=""
            />
          </template>
          <div
            v-for="(item, index) in actions"
            :key="index"
            class="popover_box"
          >
            <span :class="item.icon" @click="onSelect(item)">
              <span style="padding-left: 10px">{{ item.text }}</span>
            </span>
          </div>
        </van-popover>
      </span>
    </div>

    <!-- 内容 -->
    <div class="content_box" v-if="tabsList.length > 0">
      <!-- 切换栏 -->
      <div class="tabs_box">
        <van-tabs
          v-model="active"
          color="rgb(247,247,247)"
          background="rgb(247,247,247)"
          @click="choiceTabs"
          swipeable
          swipe-threshold="4"
        >
          <!-- :title="'标签 ' + item.name" -->
          <van-tab
            class="vant_tab_d"
            v-for="(item, index) in tabsList"
            :title="item.title"
            :key="index"
          >
            <div slot="title" class="badge_box">
              <span :class="active === index ? 'active' : ''">{{
                item.title
              }}</span>
              <!-- <span :class="active === index ? 'active' : ''">{{
                item.name
              }}</span> -->
              <van-badge
                :content="item.titleCount == null ? 0 : item.titleCount"
                class="van-badge_b"
                max="99"
              >
                <div class="child" />
              </van-badge>
            </div>
            <div class="zhiixng_box">
              <div
                v-for="(item, index) of zhixingType"
                :key="index"
                @click="handleZhixing(item)"
                :class="zhixingFlag === index + 1 ? 'choice_zhixing' : ''"
              >
                <div>
                  <img :src="item.imgUrl" alt="" srcset="" />
                </div>
                <div>{{ item.name }}</div>
              </div>
            </div>
            <!-- 嘟消息 -->
            <div
              class="du_content"
              ref="scroll_du"
              @scroll="scrollBottom"
              v-if="duList.length > 0"
            >
              <div
                v-for="(item, index) of duList"
                :key="index"
                class="du_box"
                v-show="item.isDelete != '1'"
              >
                <span v-if="checkboxShow"
                  ><el-checkbox
                    v-model="item.checked"
                    @change="changeBox(item)"
                  ></el-checkbox
                ></span>
                <img
                  class="du_img"
                  src="~@/assets/duZhongTai/duLogo.png"
                  alt=""
                  srcset=""
                />
                <div class="du_c" @click.stop="handleDetails(item)">
                  <div class="du_c_i">
                    <span>
                      <!-- {{ item.title }} -->
                      {{
                        item.title.length >= 10
                          ? item.title.substring(0, 10) + "..."
                          : item.title
                      }}
                    </span>
                    <span>
                      <!-- <img :src="item.imgUrl" alt="" srcset="" /> -->
                      <img
                        v-if="item.sceneType == '嘟执行'"
                        src="../../../../assets/duZhongTai/zhixing.png"
                        alt=""
                        srcset=""
                      />
                      <img
                        v-if="item.sceneType == '嘟预警'"
                        src="../../../../assets/duZhongTai/yujing.png"
                        alt=""
                        srcset=""
                      />
                      <img
                        v-if="item.sceneType == '消息通知类'"
                        src="../../../../assets/duZhongTai/tongzhi.png"
                        alt=""
                        srcset=""
                      />
                      <img
                        v-if="item.sceneType == '知识通知类'"
                        src="../../../../assets/duZhongTai/xiaoxi.png"
                        alt=""
                        srcset=""
                      />
                    </span>
                  </div>
                  <div class="du_c_t">
                    {{
                      item.content === "" || item.content === null
                        ? "暂无内容"
                        : item.content
                    }}
                  </div>
                </div>
                <!-- <div class="collect" v-if="item.like === 1"><van-icon name="like"  color="#ee0a24"/></div>
                <div class="collect" v-if="item.like === 0"><van-icon name="like"  /></div> -->
                <!-- <div class="collect" @click.stop="handleLike(item)"> -->
                <div class="collect">
                  <span
                    @click.stop="handleLike(item)"
                    style="margin-right: 10px"
                  >
                  <van-button :disabled="isDisabled">
                    <van-icon
                      name="like"
                      :color="item.isCollect === '1' ? '#ee0a24' : ''"
                      class="myStyle"
                      
                    />
                    </van-button>
                  </span>
                  <span class="delete_o" @click.stop="handleDelect(item)">
                    <van-button :disabled="isDisabled">
                    <van-icon name="delete-o"/>
                    </van-button>
                  </span>
                </div>
                <div :class="item.redStatus == '1' ? '' : 'box_round'"></div>
              </div>
              <div v-if="noMore" class="no_more">没有更多了...</div>
            </div>
            <div v-else class="du_content">
              <van-empty description="暂无数据..." />
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <div v-else>
      <van-empty description="数据加载中..." />
    </div>
    <!-- 批量处理 -->
    <div class="bottom_box" v-if="bottomBoxShow" @click.stop="handleBottom">
      <div style="float: right">
        <van-button type="primary" size="mini" @click.stop="handelMore()" :disabled="isDisabledMore"
          >标记已读</van-button
        >
        <van-button type="danger" size="mini" @click.stop="handelMoreDelect()"
          >删除</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";

import { Popover } from "vant";
import { Icon } from "vant";
import { Tab, Tabs } from "vant";
import { Button } from "vant";
import { Badge } from "vant";
import { Dialog } from "vant";
Vue.use(Badge);
Vue.use(Button);
Vue.use(Tab);
Vue.use(Tabs);

Vue.use(Icon);
Vue.use(Popover);
Vue.use(Dialog);
import { Toast } from "vant";
import "@/utils/workhelper.js";
export default {
  data() {
    return {
      isDisabled: false,//控制 收藏，删除图标是否禁用
      isDisabledMore: false,//控制 标记已读按钮是否禁用
      loading: true,
      token: null,
      checkboxShow: false, //多选框显隐
      bottomBoxShow: false, //底部批量按钮
      showPopover: false,
      active: "0",
      zhixingFlag: 1, //用于选中的执行类添加样式
      // 通过 actions 属性来定义菜单选项
      actions: [
        { text: "回收站", icon: "iconfont icon-lajixiang" },
        { text: "搜索", icon: "iconfont icon-sousuo" },
        {
          text: "钉住",
          icon: "iconfont icon-dingzhuhuchu-weidingzhuzhuangtai",
        },
        { text: "批量管理", icon: "iconfont icon-piliangguanli" },
        // { text: "home", icon: "iconfont icon-Homehomepagemenu" },
      ],
      tabsList: [],
      // 执行类数据
      zhixingType: [
        {
          id: 1,
          name: "执行类",
          imgUrl: require("../../../../assets/duZhongTai/zhixing.png"),
        },
        {
          id: 2,
          name: "预警类",
          imgUrl: require("../../../../assets/duZhongTai/yujing.png"),
        },
        {
          id: 3,
          name: "消息通知类",
          imgUrl: require("../../../../assets/duZhongTai/tongzhi.png"),
        },
        {
          id: 4,
          name: "知识通知类",
          imgUrl: require("../../../../assets/duZhongTai/xiaoxi.png"),
        },
      ],
      duList: [], // 内容
      yuyueList: [],
      logList: [],
      sceneName: "执行类", //场景名称，默认执行类，点击场景，获取对应的场景名
      isRedFlag: "", //是否已读,默认是空，点击tabs,获取对应的值
      sceneExecute: "", //是否处理,默认是空，点击tabs,获取对应的值 0 未处理 1 已处理
      oneGroupPeople: "", //是否处理,默认是空，点击tabs,获取对应的值 0 个人 1 群聊
      pageNum: 1,
      pageSize: 20,
      total: 0,
      noMore: false,
      scrollPosition: 0, // 保存滚动位置的状态
      staffAccount: "", //工号
      scrollTopNum: "",
      dataObj: null,
      updateRed: [], //批量已读保存的多个数据
    };
  },
  watch: {},
  activated() {
    console.log("------activated------");
    const scrollPosition = sessionStorage.getItem("scrollPosition");
    let scrollDu = this.$refs.scroll_du;
    console.log(scrollPosition, scrollDu);
    if (scrollDu) scrollDu[0].scrollTo(0, scrollPosition);
    console.log("this.duList==", this.duList);
    this.showPopover = false; //隐藏左上角更多
    this.loading = true;
    this.bottomBoxShow = false;
    this.checkboxShow = false;
    this.isDisabled = false;
    this.getHeaderTabs(); //最新的头部切换栏 - 点击数据进入详情页返回时，状态变为已读，头部数据需要变化
    //从其他页面返回到首页时候，需要调取列表接口，用于取消收藏，回收，删除等状态修改，
    //! 但是首次进入页面,如果调取getDuData（），执行类，全部的数据，只会显示前二十条，就没了，需要再次点击全部按钮，才会返回全部数据
    //! 再次进行判断，页面首次进来时，activated监听的this.duList的长度为0，其他页面返回时，this.duList不为0，所以在此判断什么时候调取列表数据接口
    if (this.duList.length > 0) { 
      this.pageNum = 1;
      this.duList = [];
      this.getDuData();
    }
    setTimeout(() => {
      this.loading = false;
    }, 1000);
    // scrollDu && scrollDu[0].scrollTo(0, scrollPosition);
  },
  created() {},
  beforeRouteLeave(to, from, next) {
    console.log("wwwww", from);
    // 将滚动位置保存到会话存储中
    sessionStorage.setItem("scrollPosition", this.scrollPosition);
    next();
  },
  beforeRouteEnter(to, from, next) {
    console.log("2222222");
    // 从会话存储中获取之前保存的滚动位置
    const scrollPosition = sessionStorage.getItem("scrollPosition");
    console.log("scrollPosition==", scrollPosition);
    if (scrollPosition) {
    } else {
      window.scrollTo(0, 0); // 如果没有保存滚动位置，则滚动到页面顶部
    }
    next();
  },
  mounted() {
    setTimeout(() => {
      this.getAutoAccept();
      this.loading = false;
    }, 1500);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll(scrollTop) {
      this.scrollPosition = scrollTop || 0;
      // console.log("scrollPosition===", this.scrollPosition);
    },
    //返回
    goHome() {
      this.$router.back(-1);
    },
    getAutoAccept() {
      var opt = {
        success: (data) => {
          // this.logList.push({ text: data });
          if (data.retCode == "0") {
            // this.logList.push({ text: data });
            this.dataObj = data;
            this.token = data.retData;
            // this.token = data.retData.appToken;
            window.sessionStorage.setItem("duToken", this.token);
            //如果token存在，调取后续接口
            if (this.token) {
              // this.tokenShow = true;
              //根据token获取工号接口
              this.getStaffAccount();
              // this.getHeaderTabs();//最新的头部切换栏
              //调用列表数据
              // this.getDuData();
            }
          } else {
            Toast("暂无token");
          }
        },
        fail: (data) => {
          alert("error:" + JSON.stringify(data));
        },
      };
      //插件调用代码
      // WorkHelper.getToken(opt);
      SelfHelper.getUserToken(opt); //目前使用的获取token接口
      //根据token获取工号接口
      // this.getStaffAccount();
    },
    //根据token获取工号接口
    getStaffAccount() {
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/getToken"),
        method: "get",
        params: this.$http.adornParams({
          // token: "2453465346346",
          token: this.token,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("data==", data.data);
          console.log("data==", data.data.empee_acct);
          this.staffAccount = data.data.empee_acct;
          if (data.data.empee_acct) {
            this.getHeaderTabs(); //最新的头部切换栏
            this.getDuData();
          } else {
            Toast.fail("该工号不存在");
          }
        } else {
          Toast.fail(data.msg);
        }
      });
    },
    //获取头部数据 不用了
    getHeaderData() {
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/getredAccount"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("data==", data);
          let proTypeData = data.data.sort((a, b) => {
            return b.isRed - a.isRed; //降序排列
          });
          this.tabsList = proTypeData;
        } else {
          Toast.fail(data.msg);
          this.tabsList = [];
        }
      });
    },
    //获取头部数据 -- 获取头部切换栏
    getHeaderTabs() {
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/getTitle"),
        method: "get",
        params: this.$http.adornParams({
          sceneType: this.sceneName, //场景名称
          staffAccount: this.staffAccount, //工号
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("data==", data);
          this.tabsList = data.data;
          // this.active = "0";
        } else {
          Toast.fail(data.msg);
          this.tabsList = [];
        }
      });
    },
    //点击tabs
    // choiceTabs(active) {
    choiceTabs(name, title) {
      this.bottomBoxShow = false;
      this.checkboxShow = false;
      this.isDisabled = false;
      console.log("123===", "name=", name, "title==", title);
      this.active = name;
      console.log("this.active==", this.active);
      if (title == "全部") {
        this.isRedFlag = "";
        this.sceneExecute = "";
        this.oneGroupPeople = "";
      } else if (title == "已读") {
        this.isRedFlag = "1";
        this.sceneExecute = "";
      } else if (title == "未读") {
        this.isRedFlag = "0";
        this.sceneExecute = "";
      } else if (title == "已处理") {
        this.isRedFlag = "";
        this.sceneExecute = "1";
      } else if (title == "未处理") {
        this.isRedFlag = "";
        this.sceneExecute = "0";
      } else if (title == "个人") {
        this.isRedFlag = "";
        this.sceneExecute = "";
        this.oneGroupPeople = "0";
      } else if (title == "群聊") {
        this.isRedFlag = "";
        this.sceneExecute = "";
        this.oneGroupPeople = "1";
      } else {
        this.isRedFlag = "";
        this.sceneExecute = "";
        this.oneGroupPeople = "";
      }
      console.log("this.isRedFlag==", this.isRedFlag);
      console.log("this.sceneExecute==", this.sceneExecute);
      console.log("this.sceneExecute==", typeof this.sceneExecute);
      console.log("this.isRedFlag==", typeof toString(this.isRedFlag));
      // this.sceneName = ""; //查看全部类的数据
      // this.zhixingFlag = null; //全部类下面的横线样式去掉
      this.noMore = false;
      this.duList = [];
      this.pageNum = 1;
      this.getDuData(); //调用列表数据
    },
    //点击执行类
    handleZhixing(item) {
      this.bottomBoxShow = false;
      this.checkboxShow = false;
      this.isDisabled = false;
      this.loading = true;
      // this.getAutoAccept();
      // console.log("item=", item);
      this.isRedFlag = ""; //已读，未读
      this.sceneExecute = ""; //已处理，未处理
      this.oneGroupPeople = ""; //个人，群聊
      console.log("item=", item.name);
      this.sceneName = item.name;
      this.zhixingFlag = item.id;
      this.noMore = false;
      this.duList = [];
      this.pageNum = 1;
      this.getHeaderTabs(); //头部切换栏
      this.getDuData(); //列表数据
      this.loading = false;
    },
    //获取列表数据
    getDuData() {
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/getList"),
        method: "get",
        params: this.$http.adornParams({
          sceneType: this.sceneName, //场景名称
          isRed: this.isRedFlag, //是否已读 0未读 1已读 null全部
          sceneExecute: this.sceneExecute, //是否处理,默认是空，点击tabs,获取对应的值 0 未处理 1 已处理
          oneGroupPeople: this.oneGroupPeople, //是否处理,默认是空，点击tabs,获取对应的值 0 个人 1 群聊
          flag: "0", //首页进来传0，搜索页传1
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          token: this.token,
          staffAccount: this.staffAccount, //工号
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          if (data.data.records.length) {
            this.duList = [...this.duList, ...data.data.records]; // 合并数据
            console.log("合并后的数据==", this.duList);
          } else {
            this.noMore = true; // 用一个变量来记录没有更多数据了
          }
        } else {
          Toast.fail(data.msg);
        }
      });
    },
    /** 判断滚动到底部 */
    scrollBottom(e) {
      const { scrollTop, scrollHeight, clientHeight } = e.srcElement;
      // console.log("scrollTop=", scrollTop);
      this.scrollTopNum = scrollTop;
      this.handleScroll(scrollTop);
      // 滚动距离顶部高度 + 可视区域高度 >= 滚动内容高度，说明滚动到底
      if (scrollTop + clientHeight >= scrollHeight) {
        console.log("触底了，加载数据");
        if (this.noMore) return;
        this.pageNum++;
        this.getDuData();
      } else {
        // console.log("到底了");
      }
    },
    /** 请求后端分页数据，滚动到底加载更多 */
    async getMoreData() {
      const { data: res } = await axios.post(`xxxx`, {
        pageSize: 4,
        pageIndex: this.pageIndex - 1,
      });
      if (res.code === 200) {
        // 数组有值说明还有数据
        if (res.data.length) {
          this.pageIndex++;
          this.data = [...this.data, ...res.data]; // 合并数据
          console.log("ssss");
        } else {
          this.noMore = true; // 用一个变量来记录没有更多数据了
        }
      }
    },
    //点击右上角
    onSelect(action) {
      let aaa = window.sessionStorage.getItem("duToken");
      console.log("token=", aaa);
      //   console.log("action=", action);
      console.log("action=", action.text);
      this.showPopover = false;
      if (action.text === "批量管理") {
        this.bottomBoxShow = true; //底部按钮显示
        this.checkboxShow = true; //多选框显示
        this.isDisabled = true;
      } else if (action.text === "搜索") {
        // this.$router.push("groundSearchHtml");
        console.log("staffAccount", this.staffAccount);
        this.$router.push({
          name: "groundSearchHtml",
          params: {
            staffAccount: this.staffAccount, //工号,
          },
        });
      } else if (action.text === "回收站") {
        // this.$router.push("recoveryHtml");
        this.$router.push({
          name: "recoveryHtml",
          params: {
            staffAccount: this.staffAccount, //工号,
          },
        });
      } else if (action.text === "钉住") {
        // this.$router.push("collectHtml");
        this.$router.push({
          name: "collectHtml",
          params: {
            staffAccount: this.staffAccount, //工号,
          },
        });
      }
      //   Toast(action.text);
    },
    //选中的数据
    changeBox(obj) {
      this.yuyueList = [];
      console.log("obj=", obj);
      this.yuyueList.push(obj);
      console.log("this.yuyueList", this.yuyueList);
      console.log("this.yuyueList", this.yuyueList.length);
    },
    //控制底部按钮消失
    handleBottom() {
      this.bottomBoxShow = false; //底部按钮消失
      this.checkboxShow = false; //多选框消失
      this.isDisabled = false;
      var length = this.duList.length;
      for (var i = 0; i < length; i++) {
        console.log("-----", this.duList[i]);
        this.$set(this.duList[i], "checked", false);
      }
      this.yuyueList = [];
      console.log("11111");
    },
    //批量已读
    handelMore() {
      console.log("ddddd");
      let aaa = this.duList.filter((d) => d.checked === true);
      // console.log("aaa=", aaa);
      this.updateRed = aaa;
      this.getUpdateRedMore();
      //   this.addDialogVisible = true;
    },
    //点击进入详情页
    handleDetails(item) {
      console.log("点击进入详情页item==", item);
      this.getUpdateRed(item);
      this.$router.push({
        name: "groundDetailsHtml",
        params: {
          item: item,
        },
      });
    },
    //单个已读
    getUpdateRed(item) {
      let logId = [item.id];
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/updateRed"),
        method: "post",
        data: this.$http.adornData(logId, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
        } else {
          Toast.fail(data.msg);
        }
      });
    },
    //多个已读
    getUpdateRedMore() {
      console.log("updateRed===", this.updateRed);
      var logId = this.updateRed.map((item) => {
        //循环点击的对象，拿到每个对象的id
        return item.id;
      });
      console.log("ids====", logId);
      // return;
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/updateRed"),
        method: "post",
        data: this.$http.adornData(logId, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          Toast({
            message: "该数据标记已读",
            forbidClick: true,
            color: "#ee0a24",
          });
          this.bottomBoxShow = false;
          this.checkboxShow = false;
          this.isDisabled = false;
          this.updateRed.forEach((el) => {
            console.log("el.redStatus==", el.redStatus);
            el.redStatus = 1;
          });
          this.getHeaderTabs();
          this.pageNum = 1;
          this.duList = [];
          this.getDuData(); //列表数据
        } else {
          Toast.fail(data.msg);
        }
      });
    },
    //收藏与取消
    handleLike(obj) {
      console.log("obj=", obj);
      let isLike = "";
      isLike = obj.isCollect == "1" ? "0" : "1";
      console.log("isLike==", isLike);
      console.log("isLike==", typeof isLike);
      this.getLike(obj.id, obj.staffAccount, isLike, obj);
    },
    //收藏和取消收藏
    getLike(logId, staffAccount, isCollect, obj) {
      let listNew = [];
      let objNew = {};
      objNew.logId = logId;
      objNew.staffAccount = staffAccount;
      objNew.isCollect = isCollect;
      listNew.push(objNew);
      console.log("listNew===", listNew);
      // return
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/insert"),
        method: "post",
        data: this.$http.adornData(listNew, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          if (isCollect == "1") {
            Toast({
              message: "收藏成功",
              forbidClick: true,
              color: "#ee0a24",
            });
          } else {
            Toast({
              message: "取消收藏",
              forbidClick: true,
              color: "#ee0a24",
            });
          }
          console.log("this.duList==", this.duList);
          obj.isCollect = isCollect; //改变收藏状态
        } else {
          Toast.fail(data.msg);
        }
      });
    },
    //批量删除
    handelMoreDelect() {
      console.log("ddddd");
      this.isDisabledMore = true;
      let delectData = this.duList.filter((d) => d.checked === true);
      console.log("delectData=", delectData);
      Dialog.confirm({
        title: "提示",
        message: "确定将此数据移至回收站吗?",
      })
        .then(() => {
          console.log("sssss");
          // Toast.success("删除成功");
          // return
          this.getDelectMore(delectData);
        })
        .catch(() => {
          console.log("1111111");
          this.isDisabledMore = false;
        });
      //   this.addDialogVisible = true;
    },
    getDelectMore(delectData) {
      let listNew = [];
      // let objNew = {};
      console.log("delectData==", delectData);
      delectData.forEach((aa) => {
        let objNew = {};
        console.log("aa==", aa);
        (objNew.logId = aa.id),
          (objNew.staffAccount = aa.staffAccount),
          (objNew.isDelete = "1"),
          listNew.push(objNew);
      });
      console.log("listNew===", listNew);
      // return;
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/insert"),
        method: "post",
        data: this.$http.adornData(listNew, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          Toast({
            message: "删除成功",
            forbidClick: true,
            color: "#ee0a24",
          });
          console.log("this.duList==", this.duList);
          this.bottomBoxShow = false;
          this.checkboxShow = false;
          this.isDisabled = false;
          this.isDisabledMore = false;
          delectData.forEach((el) => {
            console.log("el.isDelete==", el.isDelete);
            el.isDelete = "1";
          });
          // obj.isDelete = "1"; //改变删除状态
        } else {
          Toast.fail(data.msg);
        }
      });
    },
    //单个删除
    handleDelect(obj) {
      console.log("obj==", obj);
      let delects = "";
      delects = obj.isDelete == "1" ? "0" : "1";
      console.log("delects==", delects);
      console.log("delects==", typeof delects);
      Dialog.confirm({
        title: "提示",
        message: "确定将此数据移至回收站吗?",
      })
        .then(() => {
          console.log("sssss");
          // Toast.success("删除成功");
          this.getDelect(obj.id, obj.staffAccount, delects, obj);
        })
        .catch(() => {});
    },
    //删除数据
    getDelect(logId, staffAccount, delects, obj) {
      let listNew = [];
      let objNew = {};
      objNew.logId = logId;
      objNew.staffAccount = staffAccount;
      objNew.isDelete = delects;
      listNew.push(objNew);
      console.log("listNew===", listNew);
      // return
      this.$http({
        url: this.$http.adornUrl("/cpcpDuMiddleground/insert"),
        method: "post",
        data: this.$http.adornData(listNew, false),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          Toast({
            message: "删除成功",
            forbidClick: true,
            color: "#ee0a24",
          });
          console.log("this.duList==", this.duList);
          obj.isDelete = "1"; //改变删除状态
        } else {
          Toast.fail(data.msg);
        }
      });
    },
  },
};
</script>

<style scoped>
.header_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 2.5rem;
  line-height: 2.5rem;
  /* border: 1px solid red; */
  padding: 0 10px;
}
.header_box .title {
  font-size: 1.25rem;
}
.header_box .imgOne {
  /* width: 25px; */
  height: 1.5625rem;
}
.header_box .imgTwo {
  width: 40px;
  /* height: 25px; */
}
.popover_box {
  padding-left: 0.625rem;
  line-height: 1.875rem;
}
.content_box {
  background-color: rgb(247, 247, 247);
  margin-top: 0.625rem;
}
.zhiixng_box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  padding-bottom: 1rem;
  padding-top: 0.3125rem;
}
/* .zhiixng_box .choice_zhixing{
    border-bottom: 1px solid rgb(8,233,187);
    margin-top: 5px;

} */
.zhiixng_box .choice_zhixing {
  /* margin-top: 30px;
  font-size: 16px; */
  position: relative;
  font-weight: bolder;
}
.zhiixng_box .choice_zhixing::after {
  content: "";
  width: 25px;
  height: 4px;
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(8, 233, 187);
  border-radius: 8px;
}
.zhiixng_box img {
  /* width: 4.375rem; */
  width: 2.375rem;
}
.tabs_box {
  background-color: #fff;
}
/* .vant_tab_d{
  position: relative;
} */
/* .van-tab{
   position: relative;
} */
.van-badge_b {
  position: absolute;
  top: -20%;
  /* right: -10%; */
  right: 0%;
}
.badge_box {
  position: relative;
}
.active {
  color: rgb(73, 145, 242);
}
.du_content {
  /* width: 99%; */
  /* height: calc(100vh - 200px); */
  height: calc(100vh - 170px);
  box-sizing: border-box;
  /* border: 1px solid red; */
  overflow: auto;
  background: rgb(247, 247, 247);
  /* margin-top: 20px; */
  /* padding-bottom: 1.25rem; */
  padding-bottom: 4.25rem;
  padding-top: 1px;
  /* position: relative; */
}
.du_box {
  /* position: absolute;
    top: 0px;
    left: 0px; */
  display: flex;
  width: 96%;
  margin-left: 2%;
  align-items: center;
  /* border: 1px solid red; */
  background: #fff;
  /* margin-top: 1.25rem; */
  margin-top: 0.625rem;
  border-radius: 0.625rem;
  height: 6.25rem;
  /* line-height: 100px; */
  padding: 0 5px;
  position: relative;
}
.du_box .du_img {
  width: 4.375rem;
  height: 4.375rem;
  margin-left: 10px;
}
.du_box .du_c {
  display: inline-block;
  margin-left: 10px;
  width: 70%;
}
.du_box .du_c .du_c_i {
  margin-top: -10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.du_box .du_c .du_c_i span:first-child {
  font-weight: bolder;
  /* font-size: 1.125rem; */
  font-size: 14px;
}
.du_box .du_c .du_c_t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
}
.du_box .du_c img {
  width: 1.575rem;
  vertical-align: sub;
}
.collect {
  position: absolute;
  /* bottom: 7px; */
  bottom: 10px;
  right: 14px;
}
.collect .van-icon:before {
  font-size: 18px;
}
/* .du_box .delete_o{
  display: none;
} */

.du_content /deep/ .el-checkbox {
  margin-right: 0px;
}
.bottom_box {
  /* width: 95%; */
  /* height: 30px; */
  /* line-height: 30px; */
  /* margin: 15px 15px; */

  width: 96%;
  margin-left: 2%;
  height: 50px;
  padding-right: 10px;
  position: fixed;
  bottom: 4px;
  background: #f1f1f1;
  border-radius: 0.625rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  z-index: 9999;
}
.bottom_box div {
  /* display: inline-block; */
}
.no_more {
  text-align: center;
  /* margin-top: 10px; */
  margin-top: 1.5625rem;
}
.collect .van-button{
  height: 0px;
}
.collect .van-button--default {
    color: #323233;
    background-color: #fff;
    border: 1px solid #fff;
}
.collect .van-button--normal {
    padding: 0px;
    font-size: 14px;
}
</style>
<style>
.van-popover {
  /* width: 110px;
  margin: 0px -17px !important; */
  width: 6.875rem;
  margin: 0px 0px !important;
}

/*  */
.van-tabs--line .van-tabs__wrap {
  width: 100%;
  /* border-radius: 50px; */
}
/* .van-tab__text--ellipsis{
  background: #fff;
  width: 75px;
  text-align: center;
  line-height: 30px;
  text-align: center;
  border-radius: 50px;
  overflow: inherit;
} */
.van-tab__text {
  background: #fff;
  width: 75px;
  line-height: 30px;
  text-align: center;
  border-radius: 50px;
  overflow: inherit;
  display: table-cell;
  vertical-align: middle;
}
.box_round {
  position: absolute;
  top: 3px;
  right: 17px;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
}
</style>